<template>
	<div>
		<div>
			<el-input style="width: 300px; margin-right: 10px; margin-left: -500px;" 
				clearable 
				@clear="initSte"
				v-model="staffId"
				 @keydown.enter.native="initSte" 
				 placeholder="请输入员工编号搜索" 
				 prefix-icon="el-icon-search">
			</el-input>
			<el-button type="primary" @click="initSte">搜索</el-button>
			<el-button type="primary" @click="showSteAdd">添加</el-button>
		</div>

		<div>
			<el-table :data="stewardData" stripe border style="width: 100%">
				<el-table-column prop="staffId" label="员工编号" width="100">
				</el-table-column>
				<el-table-column prop="houseId" label="公寓编号" width="100">
				</el-table-column>
				<el-table-column prop="floorName" label="楼层名称" width="150">
				</el-table-column>
				<el-table-column prop="remarks" label="备注信息" width="100">
				</el-table-column>
				<el-table-column prop="createtime" label="创建时间" width="100">
				</el-table-column>
				</el-table-column>
				<el-table-column label="操作" align="center" width="200">
					<template slot-scope="scope">
						<el-button @click="showStewardEdit(scope.row)">编辑</el-button>
						<el-button @click="deleteSteward(scope.row)" type="danger">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background @current-change="currentChange" layout="prev, pager, next,jumper,->,total"
				:total=total>
			</el-pagination>
		</div>
		<el-dialog title="添加服务对象管理信息" :visible.sync="dialogVisible">
			<stewardAdd :dialogVisible.sync=dialogVisible @add="initSte()"></stewardAdd>
		</el-dialog>
		
		<el-dialog title="服务对象编辑" :visible.sync="editVisible">
			<StewardEdit :editVisible.sync="editVisible" :formData="formData"></StewardEdit>
		</el-dialog>
		
		
	</div>
</template>

<script>
	import stewardAdd from './steward_add.vue'
	import StewardEdit from './steward_edit.vue'

	export default {
		name: "Steward",
		components: {
			stewardAdd,
			StewardEdit
		},
		data() {
			return {
				dialogVisible: false,
				stewardData: [],
				total: 0,
				currentPage: 1,
				size: 10,
				staffId: '',
				dialogVisible: false,
				editVisible: false,
				formData:{
					staffId:'',
					houseId:'',
					floorName:'',
					remarks:'',
					createtime:''
				}
			}
		},
		mounted() {
			this.initSte();
		},
		methods: {
			showStewardEdit(data){
				this.editVisible = true;
				this.formData = data;
			},
			deleteSteward(data){
				this.$confirm('此操作将永久删除' + data.staffId + '是否继续？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.getRequest('/steward/delete?staffId=' + data.staffId).then(resp => {
						if (resp) {
							this.initSte();
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			currentChange(currentPage) {
				this.currentPage = currentPage;
				this.initSte();
			},
			showSteAdd() {
				this.dialogVisible = true
			},
			initSte() {
				this.getRequest('/steward/planList?currentPage=' + this.currentPage + '&size=' + this.size +
					'&staffId=' + this.staffId).then(resp => {
					if (resp) {
						this.stewardData = resp.data;
						this.total = resp.total;
					}
				})
			}
		}
	}
</script>

<style>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
</style>
